<template>
    <div class="order-history">
        <div v-if="orderList.length === 0" class="empty-order">
            <img src="@/assets/images/empty-order.png" alt="暂无订单">
            <p>暂无订单</p>
        </div>
        <div v-else class="order-list">
            <div v-for="order in orderList" :key="order.id" class="order-item">
                <div class="order-header">
                    <span class="order-no">订单号：{{ order.orderNo }}</span>
                    <span class="order-time">{{ order.createTime }}</span>
                    <span class="order-status">{{ order.status }}</span>
                </div>
                <div class="order-content">
                    <div v-for="item in order.products" :key="item.id" class="product-item">
                        <img :src="item.image" :alt="item.name">
                        <div class="product-info">
                            <h4>{{ item.name }}</h4>
                            <p>数量：{{ item.quantity }}</p>
                            <p>单价：¥{{ item.price }}</p>
                        </div>
                    </div>
                </div>
                <div class="order-footer">
                    <span class="total-amount">总计：¥{{ order.totalAmount }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getOrderList } from '@/api/order'

export default {
    data() {
        return {
            orderList: [],
            loading: false
        }
    },
    created() {
        this.getOrders()
    },
    methods: {
        async getOrders() {
            this.loading = true
            try {
                const res = await getOrderList()
                if (res.code === 200) {
                    this.orderList = res.data
                }
            } catch (error) {
                this.$message.error('获取订单列表失败：' + error.message)
            } finally {
                this.loading = false
            }
        }
    }
}
</script>

<style scoped>
.order-history {
    padding: 20px;
}

.empty-order {
    text-align: center;
    padding: 40px 0;
}

.order-item {
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 15px;
}

.order-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.order-content {
    padding: 15px 0;
}

.product-item {
    display: flex;
    margin-bottom: 10px;
}

.product-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-right: 15px;
}

.order-footer {
    text-align: right;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.total-amount {
    color: #f56c6c;
    font-size: 16px;
    font-weight: bold;
}
</style> 